<template>
    <div class="ccui-home-index">
        <div class="ccui-app-container">
            <!-- 高级搜索 -->
            <div class="ccui-advanced-search-wrapper ccui-clearfix">
                <el-search
                    :formProp="formData"
                    @search="search"
                    @change="change"
                    class="ccui-highsearch no-print"
                    @resetForm="resetForm"
                >
                    <tabsToggle :toggleBtn="toggleBtn" :totalAccount="page.totalNum" :isActive="isActive"
                                @toggleClick="toggleClick"/>
                    <div class="ccui-extend-btn">
                        <el-button
                            type="primary"
                            @click="handleGoNew"
                            icon="icon-ccui-add-sup"
                        >新增
                        </el-button>
                    </div>
                    <template slot="search">
                        <el-input
                            v-model="formData.settlementCode"
                            clearable
                            searchLabel="结算单编号"
                            placeholder="请输入结算单编号模糊查询"
                            @blur="handleTrim('settlementCode')"
                        />
                        
                        <el-input
                            v-model="formData.settlementName"
                            clearable
                            searchLabel="结算单名称"
                            placeholder="请输入结算单名称模糊查询"
                            @blur="handleTrim('settlementName')"
                        />
                        
                        <el-date-picker
                            v-model="formData.settlementStart"
                            searchLabel="结算期间"
                            clearable
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                        />
                        
                        <el-input
                            v-model="formData.contractCode"
                            clearable
                            searchLabel="合同编号"
                            placeholder="请输入合同编号模糊查询"
                            @blur="handleTrim('contractCode')"
                        />
                        
                        <el-input
                            v-model="formData.contractName"
                            clearable
                            searchLabel="合同名称"
                            placeholder="请输入合同名称模糊查询"
                            @blur="handleTrim('contractName')"
                        />
                        
                        <el-input
                            v-model="formData.supplierName"
                            clearable
                            searchLabel="供应商"
                            placeholder="请输入供应商模糊查询"
                            @blur="handleTrim('supplierName')"
                        />
                    </template>
                    
                    <el-input
                        v-model="formData.settlementCode"
                        clearable
                        searchLabel="结算单编号"
                        placeholder="请输入结算单编号模糊查询"
                        slot="searchItem1"
                        @blur="handleTrim('settlementCode')"
                    />
                    
                    <el-input
                        v-model="formData.settlementName"
                        clearable
                        searchLabel="结算单名称"
                        placeholder="请输入结算单名称模糊查询"
                        slot="searchItem2"
                        @blur="handleTrim('settlementName')"
                    />
                    
                    <el-date-picker
                        v-model="formData.settlementStart"
                        searchLabel="结算期间"
                        clearable
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        slot="searchItem3"
                    />
                    
                    <el-input
                        v-model="formData.contractCode"
                        clearable
                        searchLabel="合同编号"
                        placeholder="请输入合同编号模糊查询"
                        slot="searchItem4"
                        @blur="handleTrim('contractCode')"
                    />
                    
                    <el-input
                        v-model="formData.contractName"
                        clearable
                        searchLabel="合同名称"
                        placeholder="请输入合同名称模糊查询"
                        slot="searchItem5"
                        @blur="handleTrim('contractName')"
                    />
                    
                    <el-input
                        v-model="formData.supplierName"
                        clearable
                        searchLabel="供应商"
                        placeholder="请输入供应商模糊查询"
                        slot="searchItem6"
                        @blur="handleTrim('supplierName')"
                    />
                </el-search>
            </div>
            <!-- Table表格 -->
            <div class="ccui-multifunctional-table-wrapper">
                <Table :table-data="tableData" :table-thead-options="tableTheadOptions" :detailUrl="detailUrl">
                    <el-table-column label="操作" width="80" fixed="right">
                        <template slot-scope="{ row }">
                            <el-button
                                v-if="row.billSource == '10'? false : ['待提交', '已撤回', '审批退回'].includes(row.settlementStatus)"
                                size="mini"
                                type="text"
                                @click="handleGoEdit(row)"
                            >编辑
                            </el-button>
                            
                            <el-button
                                v-if="row.billSource != 10 && row.settlementStatus == '审批中'"
                                size="mini"
                                type="text"
                                @click="getRevoke(row, revoke)"
                            >撤回
                            </el-button>
                            
                            <el-button
                                v-if="row.billSource == '10'? false : ['待提交', '已撤回'].includes(row.settlementStatus)"
                                size="mini"
                                type="text"
                                @click="handleDelete(row, remove)"
                            >删除
                            </el-button>
                            
                            <el-button
                                v-if="row.supplierBillStatus == '3' &&['待提交', '已撤回', '审批退回'].includes(row.settlementStatus)"
                                size="mini"
                                type="text"
                                @click="openReturnDialog(row)"
                            >退回供应商
                            </el-button>
                        </template>
                    </el-table-column>
                </Table>
                <div class="ccui-table-footer" v-show="tableData.length > 0">
                    <Pagination :page="page" @handlePageChange="handlePageChange"/>
                </div>
            </div>
        </div>
        <returnDialog ref="returnDialog" @getValue="getValue"/>
    </div>
</template>

<script>
import tabsToggle from "@/basa/components/public_practice/tabsToggle";
import Table from "@/basa/components/public_practice/Table";
import Pagination from "@/basa/components/public_practice/Pagination";
import returnDialog from "@/app/settlement-management/settlement-maintenance-approval/components/returnDialog";
import {getSettlementList, remove, revoke, sendBackToSupplier} from "@/app/settlement-management/equipment/api/index";
import listMixin from "@/app/settlement-management/equipment/mixins/listMixin";

export default {
    name: "all",
    components: {tabsToggle, Table, Pagination, returnDialog},
    mixins: [listMixin],
    data() {
        return {
            toggleBtn: [
                {
                    label: "全部",
                    status: null
                },
                {
                    label: "待提交",
                    status: "2,4"
                },
                {
                    label: "审批中",
                    status: "3"
                },
                {
                    label: "审批退回",
                    status: "6"
                },
            ],
            tableTheadOptions: [
                {
                    type: "index",
                    label: "序号",
                    width: "50",
                    fixed: true
                },
                {
                    label: "结算单编号",
                    prop: "settlementCode",
                    width: "150",
                    fixed: true
                },
                {
                    label: "结算单名称",
                    prop: "settlementName",
                    width: "300"
                },
                {
                    label: "填报单位",
                    prop: "reportInOrgName",
                    width: "200"
                },
                {
                    label: "合同编号",
                    prop: "contractCode",
                    width: "150"
                },
                {
                    label: "合同正式编号",
                    prop: "formalContractCode",
                    width: "150"
                },
                {
                    label: "合同名称",
                    prop: "contractName",
                    width: "300"
                },
                {
                    label: "供应商",
                    prop: "supplierName",
                    width: "200"
                },
                {
                    label: "结算数量",
                    prop: "currSetCount",
                    width: "90",
                },
                {
                    label: "结算金额",
                    prop: "currSetMoney",
                    width: "120"
                },
                {
                    label: "编制人",
                    prop: "reportUsername"
                },
                {
                    label: "编制日期",
                    prop: "reportTime",
                    width: "100"
                },
                {
                    label: "单据状态",
                    prop: "settlementStatus",
                    width: "70"
                }
            ],
            detailUrl: "/settlement-management/equipment-preserve/detail",
            sendBackId: null
        }
    },
    methods: {
        remove,
        revoke,
        // 分页 - 高级搜索 结束 每页显示条数要对上
        // 获取数据
        getList(reqObj) {
            let obj = {};
            let params = typeof reqObj === "object" ? reqObj : obj;
            obj.pageNo = this.page.pageNoCode;
            obj.pageSize = this.page.pageSizeCode;
            obj.settlementStatus = this.listStatus;
            obj.isShowPageLoading = true;
            getSettlementList(params).then(res => {
                let result = res.data.data;
                result.rows.map(item => {
                    item.currSetCount = item.currSetCount? item.currSetCount.toFixed(3) : "";
                    item.currSetMoney = item.currSetMoney? item.currSetMoney.toFixed(2) : "";
                    console.log(item.currSetCount, 'item.currSetCount');
                    if (item.settlementStatus == "5") {
                        switch (item.writeoffStatus) {
                            case "0":
                                item.settlementStatus = "审批通过";
                                break;
                            case "1":
                                item.settlementStatus = "冲销中";
                                break;
                            case "2":
                                item.settlementStatus = "已冲销";
                                break;
                        }
                    } else {
                        item.settlementStatus = this.equipmentSettlementStatus[item.settlementStatus];
                    }
                });
                this.tableData = result.rows;
                this.page.totalNum = result.recordsTotal;
                this.page.pageNoCode = result.pageNo; // 当前页
            });
        },
        handleGoNew() {
            this.$router.push(`/settlement-management/equipment-preserve/itemNew`);
        },
        handleGoEdit(row) {
            this.$router.push({
                path: '/settlement-management/equipment-preserve/itemNew',
                query: {id: row.id}
            });
        },
        // 退回供应商
        openReturnDialog(row) {
            this.$refs["returnDialog"].visibleDialog = true;
            this.sendBackId = row.id;
        },
        // 供应商确定调用退回接口
        getValue(val) {
            let params = {
                id: +this.sendBackId,
                supplierSendBackReason: val,
                isShowPageLoading: true
            };
            sendBackToSupplier(params).then(res => {
                this.$message({
                    type: "success",
                    message: res.data.message
                });
                this.getList();
                this.handleBack();
            });
        },
    },
    activated() {
        this.getList();
    }
}
</script>

<style scoped>

</style>